﻿@model SpecificationFilterModel7Spikes

@{
    string jsFile = Url.Content("~/Plugins/SevenSpikes.Nop.AjaxFilters/Scripts/SpecificationFilter.js");
    Html.AddScriptParts(jsFile);
}

@using System.Text;
@using SevenSpikes.Nop.AjaxFilters.Models.SpecificationFilter;
@using SevenSpikes.Nop.AjaxFilters.Common;
@using SevenSpikes.Nop.AjaxFilters.Domain;
@using Nop.Web.Framework.UI;


@if(Model.NopAjaxFiltersSettings.FiltersUIMode == FiltersUIMode.UseDropdowns)
{   
    var stringBuilder = new StringBuilder();
    
    foreach(SpecificationFilterGroup specificationFilterGroup in Model.SpecificationFilterGroups)
    {
        stringBuilder.Append("#specificationFiltersDropDown");
        stringBuilder.Append(specificationFilterGroup.Id);
        stringBuilder.Append(",");
    }
    
    string specificationFilterPanelsSelector = stringBuilder.ToString().TrimEnd(new[] {','});
    
    <script type="text/javascript">

        $(document).ready(function () {

            $("@specificationFilterPanelsSelector").jDropDown();
        })

    </script>
}

<div class="specificationFilterPanel7Spikes">

@{
    int optionsGroupIndex = 0;
    int currentZIndex = Model.SpecificationFilterGroups.Count + 100;
}

@foreach (SpecificationFilterGroup specificationFilterGroup in Model.SpecificationFilterGroups)
{
    Func<int, HelperResult> specificationOptionsHtml =
        @<text>
            @foreach (SpecificationFilterItem specificationFilterItem in specificationFilterGroup.FilterItems)
            {
                string filterItemCssClass = "filterItemUnselected";

                if (specificationFilterItem.FilterItemState == FilterItemState.Checked)
                {
                    filterItemCssClass = "filterItemSelected";
                }
                    
                <li>
                    <a class="@filterItemCssClass" data-option-id="@specificationFilterItem.Id">@specificationFilterItem.Name</a>
                </li>
            }
        </text>;
    
    <div class="block block-category-navigation">
        <div class="title">
           <a class="toggleControl">@specificationFilterGroup.Name</a>
           <a class="clearFilterOptions">@T("SevenSpikes.NopAjaxFilters.Client.Common.Clear")</a>
           <div class="clear"></div>
        </div>
        <div class="clear"></div>
        
            @if (Model.NopAjaxFiltersSettings.FiltersUIMode == FiltersUIMode.UseCheckboxes)
            {
                <div class="filtersGroupPanel" data-optionsGroupId="@specificationFilterGroup.Id">
                    <ul>
                        @specificationOptionsHtml(0)
                    </ul>
                </div>
            }
            else if (Model.NopAjaxFiltersSettings.FiltersUIMode == FiltersUIMode.UseDropdowns)
            {
                <div class="filtersGroupPanel filtersDropDownPanel" data-optionsGroupId="@specificationFilterGroup.Id" style="z-index: @currentZIndex;">
                    <div id="@String.Concat("specificationFiltersDropDown", specificationFilterGroup.Id)" class="filtersDropDown">
                        <div>
                            <p></p>
                        </div>
                        <ul>
                            <li>
                                <a class="allFilterDropDownOptions selected">@T("SevenSpikes.NopAjaxFilters.Client.Common.All")</a>
                            </li>
                            @specificationOptionsHtml(0)
                        </ul>
                    </div>
                </div>
            }
        
    </div>
    
    optionsGroupIndex++;
    currentZIndex--;
    
}

</div>